<template>
  <el-scrollbar
    v-show="show && showMembers.length"
    ref="scrollBoxRef"
    class="chat-at-box"
    :style="{ left: pos.x + 'px', top: pos.y - 300 + 'px' }"
  >
    <div v-for="(member, idx) in showMembers" :key="member.id">
      <ChatGroupMember
        :member="member"
        :height="40"
        :active="activeIdx == idx"
        @click.native="onSelectMember(member)"
      />
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
const props = defineProps({
  searchText: {
    type: String,
    default: "",
  },
  ownerId: {
    type: Number,
  },
  members: {
    type: Array,
    default: () => [],
  } as any,
});
const show = ref(false);
const scrollBoxRef = ref(null);
const pos = ref({ x: 0, y: 0 });
const activeIdx = ref(0);
const showMembers = ref([]);
const isOwner = computed(() => {
  return true; //this.userStore.userInfo.id == this.ownerId;
});
// watchEffect(
//   () => props.searchText,
//   (newText, oldText) => {init()}
// );


function init() {
  scrollBoxRef.value?.wrap.scrollTop = 0;
		showMembers.value = [];
			let userId = {}//this.userStore.userInfo.id;
			let name = "全体成员";
			if (props.ownerId == userId && name.startsWith(props.searchText)) {

				let arr=	showMembers.value as any
        arr.push({
					userId: -1,
					showNickName: name
				})
        showMembers.value=arr
			}
			props.members.forEach((m) => {
				// 只显示100条
				if (showMembers.value.length > 100) {
					return;
				}
				if (m.userId != userId && !m.quit && m.showNickName.startsWith(props.searchText)) {
					showMembers.value.push(m);
				}
			})
			activeIdx.value =showMembers.value.length > 0 ? 0 : -1;
		}
		function open(pos) {
			show.value = true;
			pos.value  = pos;
			init();
		}
		function close() {
      show.value = false;
		}
		function moveUp() {
			if (	activeIdx.value > 0) {
			activeIdx.value--;
			scrollToActive()
			}
		}
		function moveDown() {
			if (	activeIdx.value < showMembers.value.length - 1) {
				activeIdx.value++;
				scrollToActive()
			}
		}
		function select() {
			if (activeIdx.value  >= 0) {
			onSelectMember(showMembers.value.[activeIdx.value ])
			}
		close();
		}
	function	scrollToActive() {
    if(scrollBoxRef.value&&scrollBoxRef.value.wrap){
      if (activeIdx.value * 40 - scrollBoxRef.value.wrap.clientHeight > scrollBoxRef.value.wrap.scrollTop) {
				scrollBoxRef.value.wrap.scrollTop += 140;
				if (scrollBoxRef.value.wrap.scrollTop > scrollBoxRef.value.wrap.scrollHeight) {
					scrollBoxRef.value.wrap.scrollTop = scrollBoxRef.value.wrap.scrollHeight
				}
			}
			if (activeIdx.value * 40 < scrollBoxRef.value.wrap.scrollTop) {
				scrollBoxRef.value.wrap.scrollTop -= 140;
				if (scrollBoxRef.value.wrap.scrollTop < 0) {
					scrollBoxRef.value.wrap.scrollTop = 0;
				}
			}
    }

		}
		function onSelectMember(member) {
			// this.$emit("select", member);
      show.value = false;
		}
</script>

<style scoped lang="scss">
.chat-at-box {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: #fff;
  box-shadow: var(--im-box-shadow);
}
</style>
